<template>
  <div class="coupon_get">
    <div class="top">
      <div class="fixed">
        <div class="top_left">
          <div class="title">可领取的优惠劵</div>
          <div class="tip">
            <span class="icon"></span>
            一次最多可领取 {{ computedGiveLimit }} 张优惠券
          </div>
        </div>
        <div class="top_right">
          <van-button
            class="get"
            round
            size="small"
            type="primary"
            :loading="loading"
            :disabled="isCanNotClick"
            @click="getAllCoupon"
          >
            一键领取
          </van-button>
        </div>
      </div>
    </div>
    <div class="center">
      <template v-if="!showTip">
        <template v-if="couponList.length != 0">
          <div
            class="coupon"
            :class="getClassNames( ele.couponType)"
            v-for="ele in couponList"
            :key="ele.couponTemplateId"
          >
            <div  :class="[ ele.ableFlag == 0 ? 'dGrey': 'left' ]" class="left">
              <div
                class="amount"
                v-if="['1', '4', '5'].includes(ele.couponType) "
              >
                ￥
                <span class="value">{{ ele.couponAmt }}</span>
              </div>
              <div class="amount" v-if="ele.couponType == 2">
                <span class="value">{{ ele.couponAmt }}</span>
                %
              </div>
              <div class="condition" v-if="ele.couponType  == 5">
            每升立减
          </div>
              <div class="condition">
                {{
                  ele.minUseCouponAmt == 0
                    ? "无门槛"
                    : "满" + ele.minUseCouponAmt + "元可用"
                }}
              </div>
              <div class="exchangeName">{{ ele.couponName }}</div>
            </div>
            <div class="right">
              <div class="title">
                <span class="type" :class="[ ele.ableFlag == 0 ? 'grey': '' ]"
                  >{{ ele.couponType == 1 ? "立减劵" : ""
                  }}{{ ele.couponType == 2 ? "折扣劵" : ""
                  }}{{ ele.couponType == 3 ? "兑换劵" : "" }}
                  {{ ele.couponType == 4 ? "洗车劵" : "" }}
                  {{ ele.couponType == 5 ? "立减劵" : "" }}
                </span>
                <span class="state">
                  {{ ele.ableFlag == 0 ? '领取已超限': "" }}
                  {{ ele.couDrawStatus == 0 ? "可尝试领取" : "" }}
                  {{ ele.couDrawStatus == 1 ? "已领取" : "" }}
                  {{ ele.couDrawStatus == 2 ? "领取失败" : "" }}
                  <!--
                  {{ ele.showStatus == 1 ? "优惠券已领完" : "" }}
                  {{ ele.showStatus == 2 ? "不满足领取条件" : "" }}
                  {{ ele.showStatus == 3 ? "不符合领取条件" : "" }}
                  -->
                </span>
              </div>
              <div class="content">
                <div class="items">
                  <div class="item scope">
                    适用：<span class="hidden-scroll"
                      >{{
                        ele.couponType == 1 ||
                        ele.couponType == 2 ||
                        ele.couponType == 4 ||
                        ele.couponType == 5
                          ? ele.couponStaNames
                          : ""
                      }}
                      {{ ele.couponType == 3 ? ele.verStaNames : "" }}
                    </span>
                  </div>
                  <div class="item valid">
                    <!-- replace(/\s{1,}\S{8,8}/,"") -->
                    截止：<span>{{
                      (ele.effectiveTimeType == 1
                        ? ele.effectiveTimeEnd || ""
                        : "") +
                        (ele.effectiveTimeType == 2
                          ? "领取后" + ele.effectiveDayNum + "天有效"
                          : "")
                    }}</span>
                  </div>
                  <div class="item from">来源：<span>加油活动</span></div>
                </div>
                <div class="btn">
                  <!-- <button @click="getCoupon([ele.couponTemplateId])">
                    领取
                  </button> -->
                </div>
              </div>
              <div class="tip">
                {{
                  !!ele.couponDetails
                    ? ele.couponDetails
                    : "使用此劵更优惠~更多活动，请关注我们的公众号！"
                }}
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div style="text-align: center">当前活动里没有可有优惠券~</div>
        </template>
      </template>
      <template v-else>
        <div style="text-align: center">{{ tip }}</div>
      </template>
    </div>
    <div class="bottom">
      <div>更多活动，请关注我们的公众号</div>
      <div>上海深斯能源科技有限公司提供技术支持</div>
    </div>
    <!-- {{$store.state.parse.issueId}} -->
  </div>
</template>

<script>
import Vue from "vue";
import { mapGetters } from "vuex";
import { Button, Toast } from "vant";

Vue.use(Button);

export default {
  head() {
    return {
      title: "领取优惠券"
    };
  },
  data() {
    return {
      loading: false,
      allList: [],
      showList: [],
      type: 0, //0全部 1充值 2支出
      gasolineAmount: 0,
      dieselAmount: 0,
      couponList: [],
      couponListInfo: {},
      giveLimit: 0, // 单次可领取的张数
      showTip: true,
      tip: "loading...",
      notClaimedCouponList: [], // 未尝试领取
      successCouponList: [], //领取成功的
      couponHoldNumMaxList: [], // 持有超额
      couponNumNEList: [], //优惠券数量不足
      couponReceiveNumList: [], //累计持有超额
      drawTemList: [],
      unDrawTemList: [],
      randomFlag: "",
      isCanNotClick: false // 是否可以点击一键领取按钮
    };
  },
  computed: {
    // ...mapGetters({
    //   userInfo: "authen/userInfo",
    // }),
    userInfo() {
      return {};
    },
    // chargeList() {
    //   return this.allList.filter((ele) => {
    //     return ele.usageType === "+";
    //   });
    // },
    // payList() {
    //   return this.allList.filter((ele) => {
    //     return ele.usageType === "-";
    //   });
    // },

    // 改为根据 返回值中 ableflag = 1 的数组长度来展示
      computedGiveLimit() {
       const arr = this.couponList.filter(ele => {
          return ele.ableFlag == 1
        })
        return arr.length
      }

    // computedGiveLimit() {
    //   if (this.couponListInfo.giveLimit > this.couponList.length) {
    //     return this.couponList.length;
    //   }
    //   return this.couponListInfo.giveLimit;
    //   // return this.couponList.length;
    // }

    // computedCouponList() {
    //   return this.couponList.map((ele) => {
    //     if (
    //       ele.showStatus == 0 ||
    //       ele.showStatus == 1 ||
    //       ele.showStatus == 2 ||
    //       ele.showStatus == 3
    //     ) {
    //       return ele;
    //     }
    //     if (this.successCouponList.includes(ele.couponId.toString())) {
    //       //领取成功
    //       ele.showStatus = 0;
    //     }
    //     if (this.couponNumNEList.includes(ele.couponId.toString())) {
    //       //优惠券数量不足
    //       ele.showStatus = 1;
    //     }
    //     if (this.couponHoldNumMaxList.includes(ele.couponId.toString())) {
    //       //持有超额
    //       ele.showStatus = 2;
    //     }
    //     if (this.couponReceiveNumList.includes(ele.couponId.toString())) {
    //       //累计持有超额
    //       ele.showStatus = 3;
    //     }
    //     return ele;
    //   });
    // },
  },
  filters: {},
  components: {},
  created() {
    // const phone = this.phone
    // if(!this.$store.state.parse.issueId){
    //   alert("此页面不支持直接访问")
    // }
    this.getCouponList();
  },
  methods: {

      // 匹配优惠券样式
  getClassNames(couponType) {
    return {
      direct: couponType == 1,
      rate: couponType == 2,
      exchange: couponType == 3,
      carwash: couponType == 4,
      reduction: couponType == 5,
      tongyong: couponType == 100
    };
  },
    translationOilListToNameList(oilArr) {
      if (!oilArr || oilArr.length == 0) {
        return "无适用油品";
      }
      let nameStr = "";
      oilArr.forEach(ele => {
        nameStr += ele.oilName;
        nameStr += ",";
      });
      return nameStr.replace(/,$/, "");
    },
    // 点击领取优惠券
    getAllCoupon() {
      this.isCanNotClick = true; // 不能点击按钮
      this.loading = true;
      Toast.loading({
        message: '领取中...',
        forbidClick: true,
        loadingType: 'spinner',
      });
      const arr = [];
      this.couponList.map(ele => {
        if (!ele.showStatus && ele.showStatus !== 0) {
          arr.push(ele.couponTemplateId);
        }
        return ele;
      });
      if (arr.length > this.computedGiveLimit) {
        arr.length = this.computedGiveLimit;
      }
      this.getCoupon(arr);
    },
    verificationNameToString(arr) {
      // let str = "";
      // arr.map((ele) => {
      //   str += ele.verificationName + " ";
      // });
      // return str;
    },
    getCouponList() {
      if (!this.$store.state.parse.issueId) {
        alert("此页面不支持直接访问");
        return;
      }
      console.log();
      this.showTip = true;
      this.tip = "loading...";
      this.$axios
        .$get("/selectCouponListByCouponIssueId", {
          params: {
            mobilePhone: this.phone,
            couponIssueId: this.$store.state.parse.issueId
            // couponIssueId: "9746330557323325",
            // enterpriseId: 123,
            // enterpriseId: this.enterpriseId,
            // unionId: this.unionId,
            // unionId:'o65PX6a8gYoXrRtsay4nid7vaN-k'
          }
        })
        .then(res => {
          if (res.retCode == 0) {
            this.showTip = false;
            //   this.giveLimit = res.data.giveLimit;
            this.couponListInfo = res.data;
            this.couponList = res.data.couponTemplateList;
            this.randomFlag = res.data.randomFlag;

            if (!this.couponList) {
              this.couponList = [];
            }
          } else {
            this.tip = res.message;
            throw new Error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
          alert(err.message);
        });
      // this.getCoupon([42]);
      // setTimeout(()=>{
      //   console.log(this.computedCouponList)
      // },2000)
    },
    getCoupon(arr) {
      this.loading = true;
      this.isCanNotClick = true;
      this.$axios
        .post("/drawCoupons", {
          // unionId: "o65PX6a8gYoXrRtsay4nid7vaN-k",
          mobilePhone: this.phone,
          // couponIssueId: "9746330557323325",
          couTemIds: arr.toString(),
          randomFlag: this.randomFlag,
          // couponIds: arr.toString(),
          couponIssueId: this.$store.state.parse.issueId
          // couponIssueId: 2347123663308618,
          // enterpriseId: this.enterpriseId,
        })
        .then(res => {
          console.log(res);
          Toast.clear()
          this.loading = false; // 关闭加载状态
          if (res.data.retCode == 0) {
            this.showTip = false;
            // this.couponListInfo = res.data;
            this.couponListInfo.couponTemplateList = res.data.data;
            this.couponList = this.couponListInfo.couponTemplateList;
            this.couponListInfo = { ...this.couponListInfo };
            // this.randomFlag = res.data.randomFlag;

            if (!this.couponList) {
              this.couponList = [];
            }
          } else {
            throw new Error(res.data.message);
          }
        })
        .catch(err => {
          console.log(err);
          alert(err.message);
        });
    }
  },
  beforeDestroy() {
    console.log("组件卸载");
    // 页面退出时，放开按钮
    this.isCanNotClick = false;
  }
};
</script>

<style lang="scss">
.coupon_get {
  width: 7.5rem;
  background: #ffffff;
  padding: 0 0.3rem 0 0.3rem;
  box-sizing: border-box;
  min-height: 100vh;

  > .top {
    width: 6.9rem;
    height: 1.5rem;

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 7.5rem;
      height: 1.5rem;
      padding: 0 0.3rem 0 0.3rem;
      box-sizing: border-box;
      background: #ffffff;
      display: flex;
      justify-content: space-between;

      .top_left {
        > .title {
          height: 0.4rem;
          font-size: 0.28rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.5);
          line-height: 0.4rem;
          letter-spacing: 1px;
          margin-top: 0.3rem;
        }

        > .tip {
          height: 0.28rem;
          font-size: 0.2rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 600;
          color: #ff5c5a;
          line-height: 0.28rem;
          margin-top: 0.1rem;

          > .icon {
            background: url("../../../static/coupon/tishi.2x.png") no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            width: 0.22rem;
            height: 0.21rem;
          }
        }
      }

      .top_right {
        width: 1.9rem;
        margin-top: 0.38rem;
      }

      .top_right > button {
        text-align: center;
        width: 1.9rem;
        height: 0.6rem;
        background: #23a97d;
        border-radius: 0.3rem;
        outline: none;
        border: none;
        font-weight: 600;
        color: #ffffff;
        font-size: 0.26rem;
        letter-spacing: 1px;
        line-height: 0.37rem;
      }

      .disabled {
        background-color: #ccc;
      }
    }
  }

  > .center {
    .coupon {
      display: flex;
      justify-content: space-between;
      height: 2.5rem;
      margin-bottom: 0.3rem;
      box-shadow: 0rem 0rem 0.1rem 0.04rem rgba(233, 223, 223, 0.5);

      > .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 2.2rem;
        height: 2.5rem;
        text-align: center;

        .amount {
          display: block;
          font-size: 0.4rem;
          font-weight: 500;
          color: #ffffff;
          line-height: 0.56rem;
          text-align: center;
          margin-top: 0rem;

          .value {
            font-size: 0.6rem;
          }
        }

        .condition {
          font-size: 0.24rem;
          font-weight: 400;
          color: #ffffff;
          line-height: 0.33rem;
          text-align: center;
          margin-top: 0.25rem;
        }

        .exchangeName {
          display: none;
          font-size: 0.35rem;
          font-weight: 500;
          color: #ffffff;
          line-height: 0.56rem;
        }
      }

      > .right {
        width: 4.56rem;
        height: 2.45rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0.08rem 0 0.05rem 0;

        .title {
          height: 0.3rem;
          font-size: 0.24rem;
          font-weight: 600;
          line-height: 0.33rem;

          .type {
            width: 1.13rem;
            height: 0.3rem;
            line-height: 0.3rem;
            display: inline-block;
            background: #f8c;
            border-radius: 0.19rem;
            font-size: 0.24rem;
            font-weight: 600;
            color: #ffffff;
            text-align: center;
          }

          .state {
            display: inline-block;
            margin-left: 0.2rem;
            color: #7f7f7f;
            height: 0.33rem;
            font-size: 0.24rem;
            font-weight: 600;
            line-height: 0.33rem;
          }
        }

        .content {
          display: flex;
          justify-content: space-between;
          margin: 0.05rem 0 0.05rem 0;
          height: 1.4rem;

          .items {
            width: 3.3rem;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-direction: column;

            .item {
              color: #272626;
              font-size: 0.21rem;

              > span {
                width: 2.3rem;
                display: inline-block;
                color: #272626;
                font-size: 0.22rem;
                font-weight: bold;
                overflow: scroll;
                /* 超出部分隐藏 */
                white-space: nowrap;
                /* 文本不换行 */
              }
            }

            .from {
              display: none;
            }
          }

          > .btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: 0.1rem;

            > button {
              height: 0.6rem;
              background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
              border-radius: 0.2rem;
              border: none;
              outline: none;
              color: #ffffff;
              line-height: 0.33rem;
              font-size: 0.3rem;
              font-weight: 400;
              overflow: hidden;
              /* 超出部分隐藏 */
              white-space: nowrap;
              /* 文本不换行 */
            }
          }
        }

        .tip {
          margin-right: 0.2rem;
          border-top: 0.02rem dashed #d8d8d8;
          height: 0.49rem;
          font-size: 0.22rem;
          font-weight: 400;
          color: #7f7f7f;
          line-height: 0.23rem;
          padding-top: 0.12rem;
          box-sizing: border-box;
          overflow: scroll;
          /* 超出部分隐藏 */
          white-space: nowrap;
          /*  text-overflow: ellipsis;*/
        }
      }
    }
    .grey {
      background-color: #eee !important;
    }

    .carwash {
      > .left {
        background: url("../../../static/coupon/quan5.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      .dGrey {
          background: url("../../../static/coupon/quan4.2x.png") no-repeat ;
          background-size: 100% 100% ;
        }
      > .right {
        > .title > .type {
          background: #19c79b;
        }

        > .content > .btn button {
          background: linear-gradient(143deg, #21d9b4 0%, #0fb582 100%);
        }
      }
    }
    .reduction {
      > .left {
        background: url("../../../static/coupon/lijian.png") no-repeat;
        background-size: 100% 100%;
      }
      .dGrey {
          background: url("../../../static/coupon/quan4.2x.png") no-repeat ;
          background-size: 100% 100% ;
        }
      > .right {
        > .title > .type {
          background: #eb6ba4;
        }

        > .content > .btn button {
          background: linear-gradient(143deg, #f38dbb 0%, #eb5297 100%);
        }
      }
    }

    .direct {
      > .left {
        background: url("../../../static/coupon/quan1.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      .dGrey {
          background: url("../../../static/coupon/quan4.2x.png") no-repeat ;
          background-size: 100% 100% ;
        }
      > .right {
        > .title > .type {
          background: #f8ce57;
        }

        > .content > .btn button {
          background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
        }
      }
    }

    .rate {
      > .left {
        background: url("../../../static/coupon/quan2.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      .dGrey {
          background: url("../../../static/coupon/quan4.2x.png") no-repeat ;
          background-size: 100% 100% ;
        }
      > .right {
        > .title > .type {
          background: #eb8573;
        }

        > .content > .btn button {
          background: linear-gradient(143deg, #f4a796 0%, #e67462 100%);
        }
      }
    }

    .exchange {
      > .left {
        background: url("../../../static/coupon/quan3.2x.png") no-repeat;
        background-size: 100% 100%;

        > .amount,
        > .condition {
          display: none;
        }

        > .exchangeName {
          display: inline-block;
          width: 1.5rem;
          margin: 0 auto;
        }
      }
      .dGrey {
          background: url("../../../static/coupon/quan4.2x.png") no-repeat ;
          background-size: 100% 100% ;
        }
      > .right {
        > .title > .type {
          background: #19c79b;
        }

        > .content > .btn button {
          background: linear-gradient(143deg, #21d9b4 0%, #0fb582 100%);
        }
      }
    }

    .expired {
      > .left {
        background: url("../../../static/coupon/quan4.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      .dGrey {
          background: url("../../../static/coupon/quan4.2x.png") no-repeat ;
          background-size: 100% 100% ;
        }
      > .right {
        > .title > .type {
          background: #bfbfbf;
        }

        > .content > .btn button {
          display: none;
        }
      }
    }
  }

  > .bottom {
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
    text-align: center;
    font-size: 0.22rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    line-height: 0.32rem;
    letter-spacing: 1px;
  }
}
.hidden-scroll::-webkit-scrollbar {
  display: none;
}




</style>
